<template>
  <div>
    <bread class="describe">
      <h1>项目标题</h1>
      <small>说明性文字说明性文字说明性文字说明性文字说明性文字说明性文字说明性文字说明性文字</small>
      <div class="pull-right">
        <el-button size="small" class="custom-button" plain>默认按钮</el-button>
      </div>
    </bread>
    <div style="height: 20px"></div>
    <bread class="second-navigation">
      <h1>项目标题</h1>
      <span class="el-icon-arrow-right icon"></span>
      <span class="sub-title">二级标题</span>
    </bread>
    <div style="height: 20px"></div>
    <bread class="filter">
      <h1>项目标题（30）</h1>
      <div class="filter-block"><span class="el-icon-search icon"></span></div>
      <div class="filter-block">考核周期：2017年度</div>
      <div class="filter-block">系部：全部</div>
      <div class="filter-block">状态：全部</div>
      <div class="pull-right">
        <el-button size="small" class="custom-button" plain>默认按钮</el-button>
        <el-dropdown split-button type="primary" size="small">
          更多菜单
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </bread>
    <div style="height: 20px"></div>
    <bread class="come-back">
      <h1>
        <span class="el-icon-arrow-left icon"></span>
        返回（1/30）
      </h1>
      <p class="title">李丽霞 2017-01至2017-12科研考核</p>
    </bread>


    <div class="box">
      <cur-dialog :visible.sync="visible" title="提示">
          <span>这是一段信息</span>
        <div>
          这是一段信息
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </cur-dialog>
      <button @click="openDialog">点击</button>
      <button @click="open">点击</button>
      <button @click="openToast">toast</button>
    </div>
    <div style="height: 1200px"></div>
  </div>
</template>

<script>
  import curDialog from '@/components/dialog/index.vue';
  
  export default {
    components: {
      curDialog
    },
    data() {
      return {
        visible: false
      }
    },
    methods: {
      openDialog() {
        this.visible = true // 通过data显式控制dialog
      },
      open() {
        this.$notice('这是一条消息')
      },
      openToast() {
        this.$toast('Hello Vue Plugin', 1500);
      }
      
    }
  }

</script>

<style lang='scss'>
  @import '../../../../style/common.scss';
</style>